﻿@using System.Web.Mvc.Html
@{
    var likes = ViewBag.likeNumberofPost;
    var author = ViewBag.author;
    var comments = ViewBag.commentsOfPost;
    var postDetail = ViewBag.postDetailInfo;
    ViewContext.Controller.ViewBag.ViewComment = ViewBag.ListComment;
    ViewContext.Controller.ViewBag.paging = ViewBag.page;
    ViewContext.Controller.ViewBag.counting = ViewBag.count;
        
}
@*google map script*@
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
 <link href="../../Content/Styles/ErrorStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">

    var Chmap;
  
    function initializes() {
        //alert('go1');
        var xtext = document.getElementById("ordinate").innerHTML;
        var icon = new google.maps.MarkerImage("/Content/images/icons/houseIcon.png", null, null, null,
            new google.maps.Size(32, 32));
        if (xtext.length > 0) {
            var textSplit = xtext.split(",");
            //declare points on Map
            var pointCenter = null;
            pointCenter = new google.maps.LatLng(textSplit[0], textSplit[1]);
            //alert('g4');
            //declare Map properties
            var ChmapProp = {
                center: pointCenter,
                zoom: 12,
                //disableDefaultUI:false, //dissable UI control
                panControl: true,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.MEDIUM,
                    position: google.maps.ControlPosition.BOTTOM_LEFT
                },
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                rotateControl: false,
                disableDoubleClickZoom: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            Chmap = new google.maps.Map(document.getElementById("MapHouse"), ChmapProp);
            var marker = new google.maps.Marker({
                position: pointCenter,
                icon: icon,
                map: Chmap
            });
        }

    } //end initialize   
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
@*slide image js*@
@*<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>*@
<script src="../../Scripts/jquery.aw-showcase.js" type="text/javascript"></script>
   
<script type="text/javascript">
    var count = -1;
    $(function () {
        $("#tabinfo").tabs();
        $("#tabinfo").tabs({
            //event: "mouseover"
        });
        $('#tabinfo').tabs({ selected: 2 });
    });
</script> 
<!-- End new tab-->

<script type="text/javascript">

    $(document).ready(function () {
  
        $("#showcase").awShowcase(
            {
                content_width: 700,
                content_height: 470,
                fit_to_parent: false,
                auto: true,
                interval: 3000,
                continuous: false,
                loading: true,
                tooltip_width: 200,
                tooltip_icon_width: 32,
                tooltip_icon_height: 32,
                tooltip_offsetx: 18,
                tooltip_offsety: 0,
                arrows: true,
                buttons: true,
                btn_numbers: true,
                keybord_keys: true,
                mousetrace: false, /* Trace x and y coordinates for the mouse */
                pauseonover: true,
                stoponclick: false,
                transition: 'hslide', /* hslide/vslide/fade */
                transition_delay: 0,
                transition_speed: 500,
                show_caption: 'onload', /* onload/onhover/show */
                thumbnails: false,
                thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
                thumbnails_direction: 'vertical', /* vertical/horizontal */
                thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
                dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
                speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
                viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
                custom_function: null /* Define a custom function that runs on content change */
            });
        //Hoangdx Code paging
        if(@ViewContext.Controller.ViewBag.paging != null && @ViewContext.Controller.ViewBag.counting != null){
            pages(@ViewContext.Controller.ViewBag.paging, @ViewContext.Controller.ViewBag.paging, @ViewContext.Controller.ViewBag.counting);
        }
        else{
            pages(@ViewBag.page, @ViewBag.page, @ViewBag.count);
        }
    });

    //Hoangdx Code Add WishList
    function WishlistClicked() {
        $('#Add').live('click',function () {
            count = count - 1;
            $.post("/Wishlists/AddWistList", {},
                function (data) {
                    if (data == "true") {
                        alert("Some error");
                    }
                    else {
                        $('#Add').replaceWith($('#Added'));
                        $('#Added').css("display", "block");
                        history.pushState(document.getElementById("Added").innerHTML, "", "#WishListed");
                        popstate("#WishListed");
                    }
                }, "json");
        });
    }
    //Hoangdx Code Insert Like
    function InsertLike() {

        $('#like').live('click',function () {
            count = count - 1;
            $.post("/Likes/InsertLikePost", {},
                function (data) {
                    if (data.check == "false") {
                        alert("Some error");
                    }
                    else {
                        $('#likeNo').text(data.likeNumber + " Liked");
                        $('#like').replaceWith($('#liked'));
                        $('#liked').css("display", "block");
                        history.pushState(document.getElementById("liked").innerHTML, "", "#Liked");
                        popstate("#liked");
                    }
                }, "json");
        });
    }
    popstate = function(url){
        if(url == "#Liked")
        {
            $('#liked').load(url + '?_ajax=1');
        }
        if(url == "#WishListed")
        {
            $('#Added').load(url + '?_ajax=2');
        }
    }
    window.onpopstate = function(event){
        if(event.state)
        {
            popstate(window.location.href);
            event.preventDefault();
        }
    }
    //Hoangdx code paging
    function loadpages(page) {
        var url = "/Comments/Paging";
        $.ajax({
            type: "Get",
            url: url,
            data: { id: page }, // them bien neu muon truyen them
            success: function (data) {
                $("#comment").html(data);
                //load();
            }
        });
    }
</script>
<link href="../../Content/Styles/slideimage.css" rel="stylesheet" type="text/css" />
@*Tab*@
@* <script src="../../Scripts/jquery.tabify.js" type="text/javascript" charset="utf-8"></script> *@
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/button.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
    .menutab
    {
        padding: 0;
        clear: both;
    }
    .menutab li
    {
        display: inline;
    }
    .menutab li a
    {
        background: #ccf;
        padding: 10px;
        float: left;
        border-right: 1px solid #ccf;
        border-bottom: none;
        text-decoration: none;
        color: #000;
        font-weight: bold;
    }
    .menutab li.active a
    {
        background: #eef;
    }
    .menutab ul
    {
        margin: 0px 5px 9px 0px !important;
    }
    .content
    {
        float: left;
        clear: both;
        border: 1px solid #ccf;
        border-top: none;
        border-left: none;
        background: whitesmoke;
        padding: 10px 20px 20px;
        width: 660px;
        height: 650px;
        font-weight: bold;
    }
    .leftlabel
    {
        margin-right: 0px;
    }
    /* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */
    
    #likeNo
    {
        position: relative;
        padding: 8px;
        color: #484D44;
        background: #d2d6a8 !important; /* css3 */
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#fcfcfc));
        background: -moz-linear-gradient(#fcfcfc, #fcfcfc);
        background: -o-linear-gradient(#fcfcfc, #fcfcfc);
        background: linear-gradient(#fcfcfc, #fcfcfc);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        box-shadow: 2px 2px 0 #c2c2c2;
        font-weight: bold;
    }
    .border-image
    {
        position: absolute;
        left: 10px;
        bottom: 10px;
    }
    .boderimg
    {
        padding: 3px;
        border-style: solid;
        border-width: 1px;
        border-color: #DDD #CACACA #ACACAC;
        line-height: 0;
        display: inline-block;
        background-color: white;
        position: relative;
        -webkit-border-radius: 2px;
        float: left;
    }
    .imgWishlist
    {
        display: block;
        position: absolute;
        top: 115px;
    }
     #container {
        background-color: white;
        min-height:1000px !important;
         padding-bottom: 0px;
    }
    .deletecomment {
        display: none;
    }
</style>
@*Body*@
<div class="detailcontainer" style="height: 1400px">
    @*   tieu de*@
    <div class="headdetail">
        <div id="title" style="font-weight: bold; font-size: 20px; color: #333">@postDetail.Title</div>
        <p id="backtolist" style="margin-right: 10px; margin-top: -10px; float: right;cursor:pointer;text-decoration: underline;color: lightskyblue;font-weight: bold">Back to list</p>
    </div>
    @if (postDetail.PostAvailable == true)
                {
                               <div style="margin-left: 30px;background: yellowGreen;font-weight: 900;font-size: 15px; width: 100px">
                                   <p style="margin-left: 5px;color: white">Available</p>
                               </div>
                }
                else
                {
                               <div style="margin-left: 30px;background: orangered;font-weight: 900;font-size: 15px; width: 100px">
                                   <p  style="margin-left: 5px;color: white">Not Available</p>
                               </div>
                }
    @*    slide*@
    <div id="slideimage" class="detailcontainer">
        <div id="showcase" class="showcase">
            <!-- Each child div in #showcase represents a slide -->
            @foreach (var image in ViewBag.imagesOfPost)
            {
                <div class="showcase-slide">
                    <!-- Put the slide content in a div with the class .showcase-content. -->
                    <div class="showcase-content">
                        <img src= @image.ImageName alt="../../Content/images/imageUnAvailable.png" style="max-width: 100%" />
                    </div>
                </div>	
            }
        </div>
    </div>
    @*like,wishlist*@
    <div id="contactinfo" class="detailcontainer">
        <div id="likeinfo" class="detailcontainer">
            <div class="row">
                @{
                            //if (@likes > 0)
                            //{
                    <div class="like">
                        <span id="likeNo">@likes Liked</span></div>
@*                    }
                    else
                    {
                    <div class="like">
                        <span>@likes likes this</span></div>
                    }   *@                      
                }
                <span style="font-size: 2.5em; position: absolute; left: 220px; color: #30883a; font-weight: bold">
                     @if (postDetail.PricePerDay > 0)
                    {

                        @postDetail.PricePerDay
                    }
                    else
                    {
                        if (postDetail.PricePerWeek > 0)
                        {
                            @postDetail.PricePerWeek
                        }
                        else
                        {
                            @postDetail.PricePerMonth
                        }
                    }
                   
                   $
                </span>
                    @if (postDetail.PricePerDay > 0)
                    {
                       <span style="font-size: 15px; position: absolute; left: 250px; color: #30883a;top:50px;font-weight: bold">
                        perdate
                       </span> 
                    }
                    else
                    {
                        if (postDetail.PricePerWeek > 0)
                        {
                        <span style="font-size: 15px; position: absolute; left: 250px; color: #30883a;top:50px;font-weight: bold">
                        perweek
                        </span> 
                        }
                        else
                        {
                           <span style="font-size: 15px; position: absolute; left: 250px; color: #30883a;top:50px;font-weight: bold">
                           permonth
                           </span> 
                        }
                    }                                                                                                                                                                                                                                                                                                                                                                                                                          
                         
            </div>
            <div class="row">
                @{
                    if (ViewBag.liked != null)
                    {
                        if (ViewBag.liked)
                        {
                    <div>
                        <input type="image" src="../../Content/images/LikeButton.png" style="float: left" />
                        <p style="float: left; margin-top: 40px; margin-left: -38px; font-size: 11px;">
                            You liked this</p>
                    </div>
                        }
                        else
                        {
                    <div id="like" >
                        <input type="image" src="../../Content/images/LikeButton.png" style="float: left"
                            onclick="InsertLike()" />
                    </div>
                    <div id="liked" style="display: none">
                        <input type="image" src="../../Content/images/LikeButton.png" style="float: left"/>
                        <p style="float: left; margin-top: 40px; margin-left: -38px; font-size: 11px">
                            You liked this</p>
                    </div>
                        }
                    }
                    else
                    {
                    <input type="image" src="../../Content/images/LikeButton.png" style="float: left"
                        id="notlike" />
                    
                    }  
                }
            </div>
            <div class="row">
                @{
                    if (ViewBag.addedtoWishlist != null)
                    {
                        if (ViewBag.addedtoWishlist)
                        {
                    <input type="image" src="../../Content/images/AddedWLButton.png" class="imgWishlist" />
                        }
                        else
                        {
                    <input type="image" src="../../Content/images/AddWLButton.png" class="imgWishlist"
                        id="Add" onclick="WishlistClicked()" />
                    <input type="image" src="../../Content/images/AddedWLButton.png" class="imgWishlist"
                        id="Added" style="display:none" />
                        }
                    }
                    else
                    {
                    <input type="image" src="../../Content/images/AddWLButton.png" class="imgWishlist"
                        id="notadd" />
                    }
                }
            </div>
        </div>
        <div class="row">
            <div id="contactdetail" class="detailcontainer" style="position: relative">
                <div class="field">
                    @* <span class="leftlabel">Contact To</span>*@ <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/team_icon.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">@postDetail.ContactName</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/dt.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">
                        (+84) @postDetail.MobilePhone</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/dtban.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">
                        (+84) @postDetail.TelePhone</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/email.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">@postDetail.Email</div>
                </div>
                <div class="border-image">
                    <div class="boderimg">
                        <img alt="#" src= "@author.AvatarPicture" style="width: 100px;height: 100px"/>
                    </div>
                    <div style="float: left; margin-left: 10px; margin-top: 30px;">
                        <span class="leftlabel" style="float: left; margin-left: 10px;">Posted by</span>
                        <span class="leftlabel" style="clear: left; margin-left: 10px; color: #1696C6; font-size: 20px">@author.Username</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @*  Tab information*@
    

    <div id="tabinfo" class="detailcontainer" style="height: 720px">
    <ul>
        <li><a href="#houseDetail">Details</a></li>
        <li><a href="#description">Description</a></li>
        <li><a href="#position">Location</a></li>
        <li><a href="#comment">Comments</a></li>
    </ul>
    <div id="comment" class="content">
        @{Html.RenderPartial("/Views/Comments/Index.cshtml");}
    </div>
    <div id="position" class="content">
        <div>
                Address Detail : @postDetail.AddressDetail</div>
            <br />
            <div>
                Province : @postDetail.Province</div>
            <br />
            <div>
                District : @postDetail.District</div>
            <br />
            <div id="ordinate" style="display: none;">@postDetail.Ordinate</div>
            <div id="MapHouse" style="width: 660px; height: 500px;">
            </div>
    </div>
    <div id="houseDetail" class="content">       
        @{
            var hasgara = @postDetail.HasGara + ".png";
            var hasgarden = @postDetail.HasGarden + ".png";
            var haschicken = @postDetail.HasKitchen + ".png";

            }
        <table style="border: 0">
            <tr>  <td>House type : </td>
                <td>@postDetail.TypeOfHouse /</td>
                 @if (ViewBag.listTypeHomestay != null)
                {
                    <td>
                        @foreach (var i in ViewBag.listTypeHomestay)
                        {
                            <span>@i</span>
                            <span>  </span>
                        }
                    </td>
                }</tr>
            <tr>
                <td>
                    Price a day
                </td>
                @if (postDetail.PricePerDay != 0)
                {
                    <td style="color: green">@postDetail.PricePerDay $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }

              

            </tr>
            <tr>
                <td>
                    Price a week
                </td>
                @if (postDetail.PricePerWeek != 0)
                {
                    <td style="color: green">@postDetail.PricePerWeek $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }
               
            </tr>
            <tr>
                <td>
                    Price a month
                </td>
                @if (postDetail.PricePerMonth != 0)
                {
                    <td style="color: green">@postDetail.PricePerMonth $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }
            </tr>
            <tr>
                <td>
                    Area
                </td>
                <td style="font-weight: normal">
                    @postDetail.Area m2
                </td>
                <td>
                    Storey
                </td>
                <td style="font-weight: normal">
                    @postDetail.Storey
                </td>
            </tr>
            <tr>
                <td>
                    Has Gara
                </td>
                <td>
                    <img src="../../Content/images/icons/@hasgara"/>
                </td>
                <td>
                    Number of Bedroom
                </td>
                <td style="font-weight: normal">@postDetail.NumBadroom
                </td>
            </tr>
            <tr>
                <td>
                    Has Garden
                </td>
                <td>
                    <img src="../../Content/images/icons/@hasgarden"/>
                </td>
                <td>
                    Number of WC/Bathroom
                </td>
                <td style="font-weight: normal">@postDetail.NumOfWC
                </td>
            </tr>
            <tr>
                <td>
                    Has Kitchen
                </td>
                <td>
                    <img src="../../Content/images/icons/@haschicken"/>
                </td>
                <td>
                    Number of SittingRoom
                </td>
                <td style="font-weight: normal">@postDetail.NumSittingRoom
                </td>
            </tr>
        </table>
          </div>    
    <div id="description" class="content">       
     <div class="detailcontainer" style="width: 630px; height: 600px; padding: 10px; margin-left: 10px;
                font-weight: normal;background: white; overflow:auto">
                @Html.Raw(postDetail.Content)
            </div>
    </div>    
    </div>
    <div id="contactbyemail" class="detailcontainer" style="border: none">
        <div class="headdetail" id="headcontact">
            Contact to Host</div>
        @{Html.RenderPartial("/Views/Sendmail/Sendmail.cshtml");}
    </div>
</div>
<script type="text/javascript">
    initializes("detailcontainer");
    $(function () {
        $("#notlike").click(function () {
            $('a[data-ajax-update="#dialog"]')[0].click();
        });
        $("#notadd").click(function () {
            $('a[data-ajax-update="#dialog"]')[0].click();
        });
        $("#backtolist").click(function () {
            
            history.go(count);
        });

    });
  
</script>
